<template>
    <Header :user="user" />
    <div class="info_div">
        <el-form ref="form" :model="user" label-width="80px" size="mini">
            <el-form-item label="ID" style="display:none;">
                <el-input v-model="update.id"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="update.username"></el-input>
            </el-form-item>
            <el-form-item label="登入账号">
                <el-input v-model="update.login"  disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <div class="head_pic">
                    <div class="head_img">
                        <img :src="update.headPic" alt="" style="width: 100%;height: 100%"/>
                    </div>
                    <el-upload
                        class="upload-demo"
                        accept=".jpg,.png,.icon"
                        limit="1"
                        ref="upload"
                        multiple="false"
                        :data="user"
                        :http-request="httpRequest"
                        action="http://localhost:9090/uploadHead"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="update.sex" placeholder="请选择活动区域">
                    <el-option label="未知" value="未知"></el-option>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="update.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="update.address"></el-input>
            </el-form-item>
            <el-form-item label="电话号">
                <el-input v-model="update.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">立即修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Header from '@/components/Header';
import request from "@/utils/request";
import '@/assets/css/info.css';

export default {
    name: "UserInfo",
    components: {
        Header ,
    },
    data() {
        return {
            user: {},
            token: "",
            update: {},
            userToken: {
            },
            fileList: [],
        }
    },
    created() {
        this.getUser();
        var temp = this.user;
        this.update = temp;
        temp = {};
    },
    methods: {
        //修改信息提交
        onSubmit() {
            request.post("/updateInfo", this.update).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "修改成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: "修改失败"
                    })
                }
            })
        },
        //文件上传
        httpRequest(data) {
            let oldFileName = data.file.name;
            let split = oldFileName.split(".");
            //new File([原文件], 新文件名,文件类型);
            var renameFile =new File([data.file], new Date().getTime() + '.' + split[split.length - 1],{type: data.file.type});
            var formData = new FormData();
            formData.append("id", this.user.id);
            formData.append("file", renameFile);
            request.post("/uploadHead", formData).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "头像上传成功"
                    })
                    //更新头像地址
                    this.user.headPic = "http://localhost:9090/file/head_pic/" + renameFile.name;
                    this.fileList = [];
                    //存入浏览器
                    this.userToken.token = this.token;
                    this.userToken.user = this.user;
                    localStorage.setItem("access-user", JSON.stringify(this.userToken));
                } else {
                    this.$message({
                        type: "error",
                        message: "头像上传失败"
                    })
                }
            })
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        getUser() {
            if (localStorage.getItem("access-user") != null) {
                this.user = JSON.parse(localStorage.getItem("access-user")).user;
                this.token = JSON.parse(localStorage.getItem("access-user")).token;
            } else {
                this.user = {};
            }
            request.get("/checkToken", {
                headers: {
                    token: this.token
                }
            }).then(res => {
                if (!res) {
                    this.$message({
                        type: "error",
                        message: "身份已过期，请重新登录"
                    })
                    localStorage.removeItem("access-user");
                    this.user = {};
                    this.$router.push("/");
                }
            })
        },
    }
}
</script>

<style scoped>

</style>